<template>
  <h2>姓名：{{ user.name }}</h2>
  <h2>薪资：{{ user.job.salary }}K</h2>
  <button @click="user.name += '!'">修改姓名</button>
  <button @click="user.job.salary++">加薪</button>
</template>

<script lang="ts">
import { reactive, watch } from "vue";

export default {
  setup() {
    let user = reactive({ name: "tom", job: { salary: 20 } });

    //使用watch监视reactive定义的对象中的属性
    // watch(
    //   () => user.name,
    //   (newValue, oldValue) => {
    //     console.log("user中的name被修改了", newValue, oldValue);
    //   },
    //   { immediate: true, deep: false }
    // );

    ////使用watch监视reactive定义的对象中的多个属性
    // watch(
    //   [() => user.name, () => user.job.salary],
    //   (newValue, oldValue) => {
    //     console.log("user被修改了", newValue, oldValue);
    //   },
    //   { immediate: true, deep: false }
    // );

    //如果是监视reactive中指定的属性则deep有效
    watch(
      () => user.job,
      (newValue, oldValue) => {
        console.log("user中的job被修改了", newValue, oldValue);
      },
      { deep: true }
    );

    return { user };
  },
};
</script>
<style></style>
